<template>
  <div class="coupon-card flex flex-space">
    <img class="coupon-bg" src="@/assets/images/coupon_bg.png" alt="" />
    <div class="price flex flex-center flex-shrink">
      <div class="unit">￥</div>
      <div class="amount font-500">{{ splitPrice.int || '' }}</div>
      <div class="amount-float font-500">{{ splitPrice.decimal || '' }}</div>
    </div>
    <div class="title flex-grow">{{ props.coupon.title || '' }}</div>
    <div v-if="props.coupon.btnText" class="btn flex-shrink font-500 flex" @click="handleClick">
      {{ props.coupon.btnText || '' }}
    </div>
  </div>
</template>
<script setup lang="ts">
import type { CouponItem } from '@/types/mall'
import { splitAmount } from '@/utils/utils'
import { computed } from 'vue'

interface CouponCardProps {
  coupon: CouponItem
  couponHeight?: string
  amountWidth?: string
}
const splitPrice = computed(() => {
  if (props.coupon.amount) {
    return splitAmount(props.coupon.amount || '0')
  }
  return { int: '0', decimal: '.00' }
})
const props = withDefaults(defineProps<CouponCardProps>(), {
  coupon: () => ({}) as CouponItem,
})
const handleClick = () => {
  emit('on-click', '')
}
const emit = defineEmits<{
  (e: 'on-click', value: string): void
}>()
</script>
<style lang="scss" scoped>
.coupon-card {
  position: relative;
  width: calc(100vw - 54px);
  height: 25vw;
  max-height: 120px;
}
.coupon-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100vw - 54px);
  height: 25vw;
  z-index: 0;
}
.price {
  position: relative;
  z-index: 1;
  width: 32.26vw;
  color: #f2373f;
  .unit {
    font-size: 18px;
    margin-top: 2px;
  }
  .amount {
    font-size: 20px;
  }
  .amount-float {
    font-size: 15px;
    margin-top: 5px;
  }
}
.title {
  position: relative;
  z-index: 1;
  font-size: 21px;
  font-weight: 800;
  color: #ee3a45;
  padding-left: 23px;
  box-sizing: border-box;
}
.btn {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: #fff;
  border-radius: 20px;
  background: #ec3a3c;
  padding: 8px 11px;
  box-sizing: border-box;
  margin-right: 16px;
  line-height: 1;
}
</style>
